<template>
  <div>
    <self-table :tableInfo="tableInfo" :cols="cols" :tableData="tableData">
      <template v-slot:head>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="add"
          >添加</el-button
        >
        <upload @http-request="upload" />
      </template>
      <template v-slot:caozuo="{ row }">
        <div class="caozuo">
          <i class="el-icon-edit-outline edit" @click="update(row)"></i>
          <i class="el-icon-delete delete" @click="del(row)"></i>
        </div>
      </template>
    </self-table>
    <div class="dialog-wrap">
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="80px">
          <el-form-item label="编号" v-if="dialogTitle !='添加'">
            <el-input
              v-model="dialogForm.riskCode"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="风险因子" prop="riskContent">
            <el-input
              v-model="dialogForm.riskContent"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import SelfTable from "@/componets/table";
import Upload from "@/componets/upload";
import { confirmHandler } from "@/utils";
import {
  factorQuery,
  factorAdd,
  factorUpdate,
  factorDelete,
  factorReadExcel,
} from "@/api/factormanagement";
export default {
  components: {
    SelfTable,
    Upload,
  },
  data() {
    return {
      pageSize: 10,
      pageNum: 1,
      searchName: "",
      total: 0,
      dialogTitle: "",//(添加|修改)
      dialogFormVisible: false,
      tableInfo: { border: true },
      dialogForm: {
        riskCode: "",
        riskContent: "",
      },
      rules:{riskContent:[{ required: true, message: '请输入风险因子名称', trigger: 'blur' }]},
      cols: [
        {
          prop: "riskCode",
          label: "编码",
          width: "220",
        },
        {
          prop: "riskContent",
          label: "风险因子",
        },
        {
          prop: "expression",
          label: "计算公式",
        },
        {
          prop: "updatedTime",
          label: "更新时间",
        },
        {
          prop: "",
          label: "操作",
          width: "80",
          slot: "caozuo",
        },
      ],
      tableData: [],
      
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        searchName: this.searchName,
      };
      const { code, data } = await factorQuery(params);
      if (code === 200) {
        this.total = data.total;
        this.tableData = data.records;
      }
    },
    add() {
      this.dialogTitle = "添加";
      this.dialogFormVisible = true;
      this.clearFrom();
    },
    update(row) {
      this.dialogTitle = "修改";
      this.dialogFormVisible = true;
      this.dialogForm.riskCode = row.riskCode;
      this.dialogForm.riskContent = row.riskContent;
    },
    async submitForm() {
      let face;
      if (this.dialogTitle === "添加") {
        this.dialogForm.riskCode = undefined;
        face = factorAdd;
      } else {
        face = factorUpdate;
      }
      const { code } = await face(this.dialogForm);
      if (code === 200) {
        this.$message.success(`${this.dialogTitle}成功`);
        this.dialogFormVisible = false;
        this.getList();
      }
    },
    async del(row) {
      confirmHandler(async () => {
        const params = {
          riskCode: row.riskCode,
        };
        const { code } = await factorDelete(params);
        if (code === 200) {
          this.$message.success(`删除成功`);
          this.dialogFormVisible = false;
          this.getList();
        }
      });
    },
    clearFrom() {
      Object.keys(this.dialogForm).forEach(
        (item) => (this.dialogForm[item] = "")
      );
    },
    async upload(file) {
      const form = new FormData();
      form.append("file", file);
     await factorReadExcel(form);
     this.getList()
    },
  },
};
</script>
<style scoped lang="scss">
</style>